<template>
    <div>
        <el-container class="common-layout">
            <el-main>
                <div class="divs">
                    <span class="title">
                        <el-icon>
                            <House />
                        </el-icon>
                        订单管理/<span style="color: #0098FF;">订单详情</span>
                    </span>
                </div>
                <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;基础信息</p>
                <el-form :model="OrderstavleData" label-width="auto" ref="refform" :rules="result">
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="订单编号:" prop="Wb_number">
                                    <el-input v-model="OrderstavleData.ord_number" placeholder="请输入内容" clearable
                                        readonly />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="客户名称:" prop="Wb_number">
                                    <el-select v-model="OrderstavleData.client_name" placeholder="请选择"
                                        style="width: 240px">
                                        <el-option v-for="item in KHtableData" :key="item.value" :label="item.ct_name"
                                            :value="item.ct_name" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="客户编码:" prop="ord_destination">
                                    <el-input v-model="bm" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="始发地:">
                                    <el-input v-model="OrderstavleData.ord_startaddress" placeholder="请输入内容"
                                        clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="目的地:">
                                    <el-input v-model="OrderstavleData.ord_destination" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <!-- <el-form-item label="合同:">
                                    <el-select v-model="OrderstavleData.Cr_id" placeholder="请选择" style="width: 240px"
                                        @change="handleChange">
                                        <el-option v-for="item in Cr_cp_name" :key="item.value" :label="item.cr_cp_name"
                                            :value="item.cr_id" />
                                    </el-select>
                                </el-form-item> -->
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="运输类型:">
                                    <el-input v-model="OrderstavleData.tran_type" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="货物类型:">
                                    <el-input v-model="OrderstavleData.cg_type" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="订单来源:">
                                    <el-input v-model="OrderstavleData.ord_source" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="下单时间:">
                                    <el-date-picker v-model="OrderstavleData.ord_time" type="datetime"
                                        placeholder="请选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="grid-content ep-bg-purple">
                                    <div class="two">
                                        <span style="color: #fff;">发</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content ep-bg-purple">
                                    <div class="one">
                                        <span style="color:#fff">收</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="联系人" prop="Wb_number">
                                    <el-input v-model="OrderstavleData.shipments_Contactname" placeholder="请输入内容"
                                        clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系人" prop="Wb_number">
                                    <el-input v-model="OrderstavleData.receiving_Contactname" placeholder="请输入内容"
                                        clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="联系电话" prop="Wb_number">
                                    <el-input v-model="OrderstavleData.shipments_ContactPhone" placeholder="请输入内容"
                                        clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系电话" prop="Wb_number">
                                    <el-input v-model="OrderstavleData.receiving_ContactPhone" placeholder="请输入内容"
                                        clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="详细地址" prop="Wb_number">
                                    <el-input v-model="OrderstavleData.shipments_addres" placeholder="请输入内容"
                                        clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="详细地址" prop="Wb_number">
                                    <el-input v-model="OrderstavleData.receiving_addres" placeholder="请输入内容"
                                        clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="计划发货时间:">
                                    <el-date-picker v-model="OrderstavleData.shipping_time" type="datetime"
                                        placeholder="请选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="计划收货时间:">
                                    <el-date-picker v-model="OrderstavleData.receiving_time" type="datetime"
                                        placeholder="请选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;货物信息</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-button type="primary" style="margin-left: -300px;" @click="JumpAdd">添加</el-button>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-table :data="Cargotabledata">
                                    <el-table-column type="index" label="序号" width="100" />
                                    <el-table-column property="cg_id" label="货物id" width=""
                                        v-if="false"></el-table-column>
                                    <el-table-column property="cg_name" label="货物名称" />
                                    <el-table-column property="" label="数量">
                                        <template #default="scope">
                                            <el-input-number v-model="scope.row.num" class="mx-4" :min="1" :max="10"
                                                controls-position="right" @change="Count" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column property="cg_unit" label="单位" />
                                    <el-table-column property="cg_volume" label="体积(m³)" />
                                    <el-table-column property="cg_weight" label="重量(kg)" />
                                    <el-table-column label="操作">
                                        <template #default="scope">
                                            <el-button link type="primary" size="small"
                                                @click="Delete(scope.row.cg_id)">
                                                删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <span style="margin-left: -30px;">合计</span>
                                <sapn style="margin-left: 800px;">
                                    数量:{{ OrderstavleData.count }}&nbsp;&nbsp;总体积:{{ OrderstavleData.totalvolume
                                    }}m³&nbsp;&nbsp;总重量:{{
                    OrderstavleData.weight }}kg
                                </sapn>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;需求车辆</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="车型:" prop="Cg_name">
                                    <el-select v-model="OrderstavleData.car_type" placeholder="请选择"
                                        style="width: 240px">
                                        <el-option v-for="item in CXtableData" :key="item.value"
                                            :label="item.dict_label" :value="item.dict_value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="车长:">
                                    <el-select v-model="OrderstavleData.car_long" placeholder="请选择"
                                        style="width: 240px">
                                        <el-option v-for="item in CCtableData" :key="item.value"
                                            :label="item.dict_label" :value="item.dict_value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="用车数量:">
                                    <el-input v-model="name" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;费用信息</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="计费方式:">
                                    <el-input v-model="OrderstavleData.bill_method" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="运输费:">
                                    <el-input v-model="OrderstavleData.freight_costs" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="保险费:">
                                    <el-input v-model="OrderstavleData.insurance" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="包装费:">
                                    <el-input v-model="OrderstavleData.packag_fee" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="装卸费:">
                                    <el-input v-model="OrderstavleData.handling_fee" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="中转费:">
                                    <el-input v-model="OrderstavleData.transit_fees" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="燃油费:">
                                    <el-input v-model="OrderstavleData.fuel_costs" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="服务费:">
                                    <el-input v-model="OrderstavleData.service_charge" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="其他费用:">
                                    <el-input v-model="OrderstavleData.other_fee" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="费用合计:">
                                    <el-input v-model="OrderstavleData.freight_count" placeholder="请输入内容" clearable
                                        readonly />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;付款方式</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="现付:" prop="Cg_name">
                                    <el-input v-model="OrderstavleData.pay_as_you_go" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="预付:">
                                    <el-input v-model="OrderstavleData.prepayment" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="到付:">
                                    <el-input v-model="OrderstavleData.collect" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="周期付:">
                                    <el-input v-model.parseFloat="OrderstavleData.periodical_payment"
                                        placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="付费合计:">
                                    <el-input v-model="OrderstavleData.pay_count" placeholder="请输入内容" clearable
                                        readonly />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;其他信息</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="订单备注:">
                                    <el-input v-model="OrderstavleData.ord_remark" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="height: 50px;"></div>
                    <div class="button">
                        <el-form-item>
                            <el-button @click="qx">取消</el-button>
                            <el-button type="primary" @click="Save">保存</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { onMounted, ref, reactive } from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Phone, Plus } from '@element-plus/icons-vue';
import { Upload } from 'element-plus';
import { useRouter, useRoute } from "vue-router";
import $http from '@/axios/base.js';
import router from '@/router';
export default {
    setup() {
        let route = useRoute();
        let ord_id = ref('');   //订单id
        let bm = ref('');  //客户编码
        let OrderstavleData = ref({});  //订单基本信息
        let ord_number = ref('');  //订单编号
        let Cargotabledata = ref([]);  //货物

        onMounted(() => {
            ord_id.value = route.query.id;
            ord_number.value = route.query.ord_number;
            Ordersshow();
            Cargoshow();
        })

        let form = reactive({   //订单类
            // ord_id: null, // 订单id
            ord_number: null, // 订单单号
            ord_startaddress: null, // 始发地
            ord_destination: null, // 目的地
            client_name: null, // 客户名称
            ord_state: null, // 订单状态（0:待调度/待接单  1:已调度/已接单）
            shipments_Contactname: null, // 发货联系人姓名
            shipments_ContactPhone: null, // 发货联系人电话
            shipments_addres: null, // 发货地址
            receiving_Contactname: null, // 收货联系人姓名
            receiving_ContactPhone: null, // 收货联系人电话
            receiving_addres: null, // 收货地址
            shipping_time: null, // 预计发货时间
            receiving_time: null, // 预计收货时间
            ord_type: null, // 订单类型
            ord_source: null, // 订单来源
            ord_remark: null, // 订单备注
            ord_time: null, // 下单时间
            create_time: new Date(), // 创建时间
            create_by: sessionStorage.getItem("empname"), // 创建人
            lastUpdate_time: null, // 最后更新时间
            lastUpdate_by: null, // 最后更新人
            del_flag: null, // 删除标志
            tran_type: null, // 运输类型
            count: 0, // 总数量
            totalvolume: 0, // 总体积
            cg_name: null, // 货物名称
            bill_method: null, // 计费方式
            weight: 0, // 总重量
            freight_costs: 0, // 运费成本
            packag_fee: 0, // 包装费
            handling_fee: 0, // 装卸费
            other_fee: 0, // 其他费用
            freight_count: null, // 运费合计
            pay_as_you_go: 0, // 现付
            prepayment: 0, // 预付
            collect: 0, // 到付
            periodical_payment: 0, // 周期付
            pay_count: null, // 付费合计
            carrier_name: null, // 承运商名称
            carrier_contact_name: null, // 承运商联系人名称
            carrier_phone: null, // 承运商联系人手机号
            driver_name: null, // 司机姓名
            driver_phone: null, // 司机手机号
            car_type: null, // 车型
            car_long: null, // 车长
            car_number: null, // 车牌号
            receivables_state: null, // 应收单-结算状态
            audit_status: null, // 审核状态（0：待审核 1：已审核）
            cg_type: null, // 货物类型
            dis_mode: null, // 配送方式
            vc_model: null, // 车型
            vc_length: null, // 车长
            take_orders_time: null, // 取订单时间
            insurance: 0, // 保险费
            transit_fees: 0, // 中转费
            fuel_costs: 0, // 燃油费
            service_charge: 0 // 服务费
        })


        function Ordersshow() {   //根据订单编号查询订单数据
            $http.get(`http://localhost:5261/api/Order/GetOrders_number/${ord_number.value}`).then((res) => {
                OrderstavleData.value = res[0];
                console.log(OrderstavleData);
                $http.get(`http://localhost:5261/api/Order/customer_Ments_name/${res[0].client_name}`).then((res2) => {
                    bm.value = res2[0].ct_numbering;
                }).catch((err2) => {
                    console.log("错误:" + err2)
                })
                switch (res[0].tran_type) {  //运输类型
                    case 0:
                        res[0].tran_type = '整车'
                        break;
                    case 1:
                        res[0].tran_type = '零担'
                        break;
                }
                switch (res[0].cg_type) {  //货物类型
                    case 0:
                        res[0].cg_type = '日用品'
                        break;
                    case 1:
                        res[0].cg_type = '食品'
                        break;
                    case 2:
                        res[0].cg_type = '文件'
                        break;
                    case 3:
                        res[0].cg_type = '家具'
                        break;
                }
                switch (res[0].ord_source) {   //订单来源
                    case '0':
                        res[0].ord_source = '手动添加'
                        break;
                    case '1':
                        res[0].ord_source = 'App用户下单'
                        break;
                    case '2':
                        res[0].ord_source = '系统导入'
                        break;
                }
                switch (res[0].car_type) {   //车型
                    case 0:
                        res[0].car_type = '微面';
                        break;
                    case 1:
                        res[0].car_type = '小面';
                        break;
                    case 2:
                        res[0].car_type = '中面';
                        break;
                    case 3:
                        res[0].car_type = '长途打车';
                        break;
                    case 4:
                        res[0].car_type = '冷藏车';
                        break;
                };
                switch (res[0].car_long) {  //车长
                    case 0:
                        res[0].car_long = '4米2';
                        break;
                    case 1:
                        res[0].car_long = '5米2';
                        break;
                    case 2:
                        res[0].car_long = '6米8';
                        break;
                    case 3:
                        res[0].car_long = '7米6';
                        break;
                    case 4:
                        res[0].car_long = '9米6';
                        break;
                    case 5:
                        res[0].car_long = '13米';
                        break;
                };
                switch (res[0].bill_method) {   //计费方式
                    case 0:
                        res[0].bill_method = '按车计费';
                        break;
                    case 1:
                        res[0].bill_method = '按重量计费';
                        break;
                    case 2:
                        res[0].bill_method = '按体积计费';
                        break;
                };
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }
        function Cargoshow() {  //查询货物
            $http.get(`http://localhost:5261/api/Order/GetOrder_Cargos/${ord_id.value}`).then((res) => {
                Cargotabledata.value = res;
                console.log(Cargotabledata.value);
                // cg_num.value = Cargotabledata.value.reduce((num, item) => {   //总数量
                //     return num + (parseFloat(item.cg_num) || 0)
                // }, 0);
                // cg_volume.value = Cargotabledata.value.reduce((num, item) => {   //总体积
                //     return num + (parseFloat(item.cg_volume) || 0)
                // }, 0);
                // cg_weight.value = Cargotabledata.value.reduce((num, item) => {   //总重量
                //     return num + (parseFloat(item.cg_weight) || 0)
                // }, 0);
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        return {
            OrderstavleData,
            ord_number,
            form,
            bm,
            Cargotabledata
        }

    }
}
</script>

<style scoped>
.one {
    width: 40px;
    height: 40px;
    background-color: #2ED477;
    font-size: 25px;
    border-radius: 4px;
    margin-left: 30px;
}

.two {
    width: 40px;
    height: 40px;
    background-color: #FF9138;
    font-size: 25px;
    border-radius: 4px;
    margin-left: 30px;
}

.three {
    margin-left: 1em;
}

.common-layout {
    /* box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5); */
    background-color: #F5F9FF;
    height: 700px;
    width: 1250px;
    margin: auto;
    padding: auto;
    /* margin: 50px; */
    /* display: flex;
    align-items: center; */
}

.title {
    padding-right: 1030px;
    padding-top: 20px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    /* background-color: aqua; */
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 100px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.button {
    padding-right: 37px;
    margin-top: 20px;
    height: 50px;
    position: fixed;
    /* 固定位置 */
    top: auto;
    /* 距离顶部20像素 */
    right: 70px;
    /* 距离右侧20像素 */
    bottom: 20px;
    /* 底部自动 */
    left: auto;
    /* 左侧自动 */
    z-index: 1000;
    /* 确保它在其他内容之上 */

}
</style>